<template>
  <div style="background-color: #f6f7f7">
    <van-nav-bar title="支付" left-arrow @click-left="onClickLeft" />
    <div style="background: #f9f9f9; height: 91vh">
      <van-form @submit="onSubmit" label-width="60">
        <div style="margin: 24px 0">
          <van-row align="left" style="margin-bottom: 10px">
            <van-col span="24">
              <span
                style="font-size: 24px; font-weight: bold"
                v-html="decimalPoint(totalAmount)"
              >
              </span>
            </van-col>
          </van-row>
          <van-row align="left" style="margin-bottom: 10px">
            <van-col span="24">
              <span style="font-size: 14px; color: #999"> 剩余支付时间 </span>
              <van-count-down
                style="display: inline-block; color: #999"
                millisecond
                :time="countDown"
                format="mm:ss"
              />
            </van-col>
          </van-row>
        </div>
        <!-- <van-row align="left" style="margin-bottom: 10px; margin-left: 10px">
          <van-col span="24" style="margin-left: -12px">
            <van-card
              num="1"
              price="365.00"
              thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
            >
              <template #title>
                <van-row>
                  <van-col span="12" style="font-weight: bold"
                    >糖尿病患者套餐</van-col
                  >
                </van-row>
              </template>
              <template #desc>
                <van-row>
                  <van-col span="17" style="font-weight: bold"
                    ><span> 这是套餐的一些注意事项 </span></van-col
                  >
                </van-row>
              </template>
            </van-card>
          </van-col>
        </van-row> -->
        <div style="width: 100%; padding: 0 16px; box-sizing: border-box">
          <div class="health-counseling">
            <div v-for="item in goodsList" :key="item.id" style="width: 100%">
              <van-card desc="" :thumb="item.template.imgUrl">
                <template #title>
                  <van-row>
                    <van-col
                      span="12"
                      style="font-weight: bold; font-size: 14px"
                    >
                      {{ item.template.name }}
                    </van-col>
                  </van-row>
                </template>
                <template #desc>
                  <p
                    style="
                      height: 40px;
                      overflow: hidden;
                      display: -webkit-box; /* 必须设置display属性为-webkit-box */
                      overflow: hidden; /* 超出部分隐藏 */
                      text-overflow: ellipsis; /* 显示省略号 */
                      -webkit-line-clamp: 2; /* 限制显示两行 */
                      -webkit-box-orient: vertical; /* 垂直方向上的换行 */
                    "
                  >
                    <van-row align="center" style="margin-top: 8px">
                      <van-col span="12">
                        <span style="font-size: 16px">
                          ￥{{ item.template.price }}
                        </span>
                      </van-col>
                      <van-col
                        span="12"
                        align="right"
                        style="font-size: 14px; color: #999"
                      >
                        <span v-if="item.quantity"> </span>
                        x{{ item.quantity }}
                      </van-col>
                    </van-row>
                  </p>
                </template>
              </van-card>
            </div>
            <p
              style="margin-bottom: 10px"
              @click="expandEvent"
              v-if="allGoodsList.length > 3"
            >
              <span style="color: #999"> 展开 </span>
              <van-icon v-if="!expand" style="color: #999" name="arrow-down" />
              <van-icon v-else style="color: #999" name="arrow-up" />
            </p>
          </div>
          <div class="remark-content">
            <van-row style="font-size: 14px; font-weight: bold; padding: 16px">
              备注
            </van-row>
            <van-cell-group inset>
              <van-field
                v-model="realName"
                name="姓名"
                label="姓名"
                placeholder="请输入姓名"
              />

              <van-field
                v-model="phone"
                type="number"
                name="手机号"
                label="手机号"
                placeholder="请输入手机号"
              />
            </van-cell-group>
          </div>
        </div>
        <van-row style="margin-top: 100px; padding: 16px">
          <van-button
            style="
              border-radius: 22px;
              height: 48px;
              background: #08d781;
              border: none;
            "
            type="primary"
            native-type="submit"
            block
          >
            <span style="font-size: 16px" @click="submit"> 下一步 </span>
          </van-button>
        </van-row>
      </van-form>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  createToPay,
  createToPayFood,
  jumpToOrderPage,
  jumpToOrderPageFood,
} from "@/api/goods/goodsManage";
import { decimalPoint, getStorage } from "@/utils/common";
import { siteTitle } from "@/settings";

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      form: {},
      expand: false,
      goodsList: [],
      totalAmount: route.query.totalAmount,
      allGoodsList: [],
      countDown: 30 * 60 * 1000,
      type: route.query.type || 0,
      realName: "",
      phone: null,
    });
    const queryGoodsList = () => {
      const data = JSON.parse(getStorage(siteTitle + "_goodsList"));
      if (state.type == 1) {
        jumpToOrderPageFood(data).then((v) => {
          const data = v.data.foodMap;
          data.forEach((value) => {
            value.food.imgUrl = "";
            value.template = value.food;
          });
          state.goodsList = data.slice(0, 3);
          state.allGoodsList = data;
        });
      } else {
        jumpToOrderPage(data).then((v) => {
          const data = v.data.templates;
          state.goodsList = data.slice(0, 3);
          state.allGoodsList = data;
        });
      }
    };
    queryGoodsList();
    // 下一步
    const onSubmit = () => {
      const data = JSON.parse(getStorage(siteTitle + "_goodsList"));
      data.realName = state.realName;
      data.phone = state.phone;
      if (state.type == 1) {
        createToPayFood(data).then((v) => {
          window.location.href = v.data;
        });
      } else {
        createToPay(data).then((v) => {
          window.location.href = v.data;
        });
      }
    };

    const onClickLeft = () => {
      router.go(-1);
    };
    // 点击展开按钮
    const expandEvent = () => {
      state.expand = !state.expand;
      if (!state.expand) {
        state.goodsList = state.allGoodsList.slice(0, 3);
      } else {
        state.goodsList = state.allGoodsList;
      }
    };
    return {
      expandEvent,
      onClickLeft,
      onSubmit,
      ...toRefs(state),
      decimalPoint,
    };
  },
};
</script>
<style lang="scss" scoped>
.health-counseling {
  overflow: hidden;
  margin-top: 10px;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;

  button {
    padding: 0 10px;
  }
  .van-card {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding: 16px;
    ::v-deep .van-card__thumb {
      margin-right: 10px;
      width: 60px !important;
      height: 60px;
      img {
        height: 100%;
      }
    }
    ::v-deep .van-card__content {
      text-align: left;
      min-height: inherit;
    }
  }
  & > div:last-of-type {
    .van-card {
      border-bottom: none;
    }
  }
}
.van-nav-bar {
  width: 100%;
  background: transparent;

  ::v-deep .van-nav-bar__text {
    color: #4bbdbe;
  }
  ::v-deep .van-nav-bar__left {
    .van-badge__wrapper {
      color: #000;
    }
  }
}
.remark-content {
  margin-top: 10px;
  background: #fff;
  border-radius: 10px;
  .van-field {
    padding-left: 0;
  }
}
</style>
